<template>
  <div id="seats">
    <h3>座位列表</h3>
    <van-row gutter="2">
      <van-col span="2" v-for="item in seats" :key="item.id">
        <span
          v-if="item.status == 0"
          class="iconfont icon-zuowei seat"
          @click="trigger(item)"
        />
        <span
          v-else-if="item.status == 2"
          style="color: green"
          class="iconfont icon-zuowei seat"
          @click="trigger(item)"
        />
        <span
          v-else
          style="color: red"
          class="iconfont icon-zuowei"
          @click="trigger2(item.name)"
        />
      </van-col>
    </van-row>
    <van-submit-bar
      :price="allPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
       <template #tip v-if="user.vip">
    您的VIP级别为 {{user.vip.name}} 可享受{{user.vip.discount}}折优惠 
    <span v-if="youHui">原价{{sourcePrice/100}} 已优惠 {{youHui/100}} 元</span>
  </template>
    </van-submit-bar>
    <van-overlay :show="loadingShow">
      <van-loading type="spinner" class="loading" color="#1989fa"
        >加载中.....</van-loading
      >
    </van-overlay>
  </div>
</template>

<script>
import { getSeatsBySessionId } from "@/api/seat";
import { getById } from "@/api/session";
import { save } from "@/api/order";
import { goAlipay } from "@/api/pay";
import { getUserInfo } from "@/api/user";
export default {
  data() {
    return {
      user: {},
      loadingShow: false,
      session: {},
      seats: [],
      price: undefined,
      allPrice: 0,
      buySeats: [],
      temp: {
        allPrice: 0,
        seatIds: [],
        customerId: undefined,
        sessionId: undefined,
        orderNum: undefined,
      },
      sourcePrice:undefined,
      youHui:undefined
    };
  },
  created() {
    this.getUser();
    this.getSession(this.$route.params.id);
    this.getSeatsList(this.$route.params.id); // 获取座位列表
  },
  methods: {
    async getUser() {
      await getUserInfo().then((response) => {
        if (response.code === "200") {
          this.user = response.data;
        }
      });
    },
    async getSession(id) {
      // 获取场次详情
      await getById(id).then((response) => {
        if (response.code === "200") {
          this.session = response.data;
          this.price = this.session.price * 100;
        }
      });
    },
    trigger(item) {
      if (item.status == 2) {
        const index = this.buySeats.indexOf(item.id);
        this.buySeats.splice(index, 1);
        item.status = 0;
        this.$notify({ type: "success", message: "已取消选择" + item.name });
      } else {
        this.buySeats.push(item.id);
        item.status = 2;
        this.$notify({ type: "success", message: "已选择" + item.name });
      }
      this.calcAllPrice();
    },
    trigger2(name) {
      this.$notify({ type: "warning", message: name + "已有人预订啦！" });
    },
    calcAllPrice() {
      // 计算总花费
      // 判断vip折扣
      if (this.user.vip) {
        this.allPrice = this.buySeats.length * this.price * this.user.vip.discount / 10; // 折扣后
        this.sourcePrice = this.buySeats.length * this.price; // 原价
        this.youHui =  this.sourcePrice - this.allPrice; // 原价
      } else {
        this.allPrice = this.buySeats.length * this.price;
      }
    },
    async getSeatsList(id) {
      // 通过sessionid获取场次的座位
      await getSeatsBySessionId(id).then((response) => {
        if (response.code === "200") {
          this.seats = response.data;
        }
      });
    },
    async onSubmit() {
      this.loadingShow = false;
      // 提交购票信息
      this.temp.allPrice = this.allPrice;
      this.temp.seatIds = this.buySeats;
      this.temp.customerId = this.$store.getters.getUser.id;
      this.temp.sessionId = this.session.id;
      await save(this.temp).then((response) => {
        if (response.code === "200") {
          console.log(response);
          this.temp.orderNum = response.data;
          // 重新拉一次座位
          this.getSeatsList(this.$route.params.id);
          if (this.temp.orderNum) {
            console.log("进来了");
            window.location.href =
              "http://qkp4sg.natappfree.cc/pay/aliPay?orderNum=" +
              this.temp.orderNum;
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
#seats {
  .seat:hover {
    color: green;
  }
  .seat {
    color: #ccc;
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>